<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Templates
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar" ng-if="folderType">

            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card">
                    <actions back-url="referrerUrl"></actions>
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <span class="input-group-text" id="basic-addon1"><i class="fas fa-folder"></i></span>
                            <select class="form-select" ng-model="viewmodel.folderType">
                                <option ng-repeat="item in folderTypes track by $index" ng-value="item">
                                    {{item}}
                                </option>
                            </select>
                            <input type="text" class="form-control" ng-disabled="!canRename"
                                ng-model="viewmodel.fileName" />
                        </div>
                        <div class="form-group mb-3">
                            <label class="form-label">Active members</label><br>
                            <div class="d-inline-block text-center" ng-repeat="member in members">
                                <preview-image class="mx-1 d-inline-block border rounded-circle"
                                    img-class="'rounded-circle'" img-height="50" img-width="50" img-src="member.Avatar">
                                </preview-image><br>
                                <strong ng-bind="member.Username"></strong>
                            </div>
                        </div>
                        <div class="mb-3">
                            <p ng-repeat="err in errors" class="text-danger" ng-bind="err"></p>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>

        <div class="content-body py-3 pe-3" ng-init="init()">

            <!-- Main content -->
            <section class="" ng-init="getSingle()">
                <form ng-class="{'submitted': submitted}" ng-submit="save()" ng-if="viewmodel">
                    <div class="row mb-3">
                        <div class="col-md-4">

                        </div>
                        <div class="col"></div>
                        <div class="col-md-3">
                        </div>
                    </div>
                    <div class="row">

                        <div class="col-md-12">
                            <tabs-v select-callback="selectPane(pane)">
                                <pane-v header="Razor Template">
                                    <div class="card card-body">
                                        <monaco-editor is-visible="activedPane.title == 'Razor Template'"
                                            is-readonly="!canEdit" content="viewmodel.content"
                                            update-content="updateTemplateContent(content)">
                                        </monaco-editor>
                                    </div>
                                </pane-v>
                                <pane-v header="Scripts">
                                    <div class="card card-body">
                                        <monaco-editor is-visible="activedPane.title == 'Scripts'"
                                            is-readonly="!canEdit" update-content="updateStyleContent(content)"
                                            content="viewmodel.scripts" default-content="'<script>\n\n</script>'">
                                        </monaco-editor>
                                    </div>
                                </pane-v>
                                <pane-v header="Styles">
                                    <div class="card card-body">
                                        <monaco-editor is-visible="activedPane.title == 'Styles'" is-readonly="!canEdit"
                                            update-content="updateScriptContent(content)" content="viewmodel.styles"
                                            default-content="'<style>\n\n</style>'">
                                        </monaco-editor>
                                    </div>
                                </pane-v>
                            </tabs-v>
                        </div>
                    </div>
                </form>
            </section>
            <!-- /.content -->
        </div>

    </div>
</div>